<template>
  <div class="package">
    <!-- <br> -->
    <el-form :inline="true"
             :model="formInline"
             class="demo-form-inline">
      <el-form-item label="套餐分类">
        <el-select v-model="formInline.menuclassify"
                   placeholder="请选择">
          <el-option label="A套餐"
                     value="A套餐"></el-option>
          <el-option label="B套餐"
                     value="B套餐"></el-option>
          <el-option label="C套餐"
                     value="C套餐"></el-option>
          <el-option label="D套餐"
                     value="D套餐"></el-option>
          <el-option label="E套餐"
                     value="E套餐"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="套餐名称">
        <el-input v-model="formInline.meunname"
                  placeholder="请输入套餐名称"></el-input>
      </el-form-item>
      <el-form-item label="启用状态">
        <el-select v-model="formInline.iswork"
                   placeholder="请选择">
          <el-option label="启用"
                     value="ture"></el-option>
          <el-option label="禁止"
                     value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success"
                   class="el-icon-search"
                   @click="onSubmit"></el-button>
      </el-form-item>
      <!-- <el-button class="filter-item" type="primary" @click="handleCreate()"  icon="edit">添加套餐</el-button>    -->

      <!-- 添加套餐 -->
      <el-button type="success"
                 @click="dialogFormVisible = true">添加套餐</el-button>

      <el-dialog title="添加项目信息"
                 :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="套餐类型"
                        :label-width="formLabelWidth">
            <el-input style="width:300px"
                      v-model="form.menuclassify"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="套餐名称"
                        :label-width="formLabelWidth">
            <el-input style="width:300px"
                      v-model="form.meunname"
                      autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="关联的项目"
                        :label-width="formLabelWidth">
            <el-input style="width:300px"
                      v-model="form.project"
                      autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="单 价"
                        :label-width="formLabelWidth">
            <el-input style="width:300px"
                      v-model="form.price"
                      autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="执行科室"
                        :label-width="formLabelWidth">
            <el-input style="width:300px"
                      v-model="form.office"
                      autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="启用状态"
                        :label-width="formLabelWidth">
            <el-input style="width:300px"
                      v-model="form.iswork"
                      autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="sure">确 定</el-button>
        </div>
      </el-dialog>
    </el-form>

    <div class="content">
      <el-table :data="taocanItem"
                style="width: 100%">
        <el-table-column label="序号"
                         width="100">

        </el-table-column>
        <el-table-column prop="menuclassify"
                         label="套餐分类"
                         width="100">

        </el-table-column>
        <el-table-column prop="meunname"
                         label="套餐名称"
                         width="100"></el-table-column>
        <el-table-column prop="project"
                         label="关联的项目"
                         width="180"></el-table-column>
        <el-table-column prop="price"
                         label="单价（元）"
                         width="130"></el-table-column>
        <el-table-column prop="office"
                         label="执行科室"
                         width="100"></el-table-column>
        <el-table-column prop="iswork"
                         label="启用状态"
                         width="100"></el-table-column>

        <el-table-column label="操作">
          <template scope="scope">

            <el-button type="success"
                       size="small"
                       @click="showwindow(scope.$index, scope.row)" >编辑</el-button>

            <el-dialog title="添加项目信息"
                       :visible.sync="dialogFormVisibleEdit">
              <el-form :model="ruleForm"
                       :rules="rules"
                       ref="ruleForm">
                <el-form-item label="套餐类型"
                              :label-width="formLabelWidth"
                              style="width:300px"
                              prop="menuclassify">
                  <el-input autocomplete="off"
                            v-model="ruleForm.menuclassify"></el-input>
                </el-form-item>
                <el-form-item label="套餐名称"
                              :label-width="formLabelWidth"
                              style="width:300px"
                              prop="meunname">
                  <el-input v-model="ruleForm.meunname"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="关联的项目"
                              :label-width="formLabelWidth"
                              style="width:300px"
                              prop="iswork">
                  <el-input v-model="ruleForm.iswork"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单价"
                              :label-width="formLabelWidth"
                              style="width:300px"
                              prop="price">
                  <el-input v-model="ruleForm.price"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="执行科室"
                              :label-width="formLabelWidth"
                              style="width:300px"
                              prop="office">
                  <el-input v-model="ruleForm.office"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="启用状态"
                              :label-width="formLabelWidth"
                              prop="project">
                  <el-select v-model="ruleForm.project"
                             placeholder="true">
                    <el-option label="true"
                               value="shanghai"></el-option>
                    <el-option label="false"
                               value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer"
                   class="dialog-footer">
                <el-button type="type"
                           @click="dialogFormVisibleEdit = false">取 消</el-button>
                <el-button type="primary"
                          @click="submitForm('ruleForm')">确 定</el-button>
              </div>
            </el-dialog>
            <el-button size="small"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

  </div>
</template>
<script >
// import {api} from '../../global/api';
import { reqTaocanList, reqDialogFormVisible, reqDelete, reqQuery, reqEdit} from '@/api'
export default {
  name: 'package',
  data () {

    return {
      currentid : '',
      formLabelWidth: '90px',
      taocanItem: [],
      reqDeleteItem: [],
      reqQuery: [],
      msg: '项目>套餐',
      dialogFormVisible: false,
      dialogFormVisibleadd: false,
      dialogFormVisibleEdit: false,
      editLoading: false,//是否显示修改状态
      currentPage1: 5,
      activeIndex: '1',
      formInline: {
        menuclassify: '',
        meunname: '',
        iswork: '',
      },
      form: {
        menuclassify: '',
        meunname: '',
        iswork: '',
        price: '',
        office: '',
        project: '',
      },
      tableData: [{
        style: '',
        name: '',
        relate: '',
        price: '',
        department: '',
        usestate: '',
      }],

      
      ruleForm: {
        menuclassify: '',
        meunname: '',
        iswork: '',
        price: '',
        office: '',
        project: '',


      },
      // 表单验证
      rules: {
        menuclassify: [
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        meunname: [
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        iswork: [
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        office: [
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        project: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
      }
    }
  },
  //实例化就获取数据
  mounted () {
    // 获取套餐列表
    this.taocanList()
    console.log(this);
  },
  methods: {
    // 显示窗口
    async showwindow(index,item){

      this.dialogFormVisibleEdit = true
      // console.log(11)
      // console.log(index,item)
      // 找到唯一的数据
      this.currentid = item._id
      // let result = await reqEdit({_id = item._id})
      // if(result.data.code ===200){
      //   this.taocanItem = result.data.data
      // }

    },
    // 提交数据
    async onSubmit () {
      // 定义查询
      let inquiryRequest = { menuclassify: this.formInline.menuclassify, meunname: this.formInline.meunname, iswork: this.formInline.iswork }
      let result = await reqQuery(inquiryRequest)
      // console.log(result);

      this.reqQuery = result.data
      // 更新数据
      this.taocanItem = result.data
    },
    handleCreate () {
      this.initform();// //每次都初始化
      this.dialogFormVisibleadd = true;
    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },

    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath);
    },

    // 获取套餐列表
    async taocanList () {
      let result = await reqTaocanList()
      console.log(result)
      this.taocanItem = result.data
    },
    // 点击确认展示数据
    async sure () {
      let result = await reqDialogFormVisible(this.form)
      console.log(result);
      if (result.data.code === 200) {
        // 通过控制台来查看数据的存放位置
        this.taocanItem = result.data
      }
      // 关闭弹窗 
      this.dialogFormVisible = false
    },

    // 使用插槽 来获取父组件传给子组件的某组件当前索引下的数据和当前索引 来精确的查找到每条数据
    async handleDelete (index, row) {
      console.log(index, row);
      console.log(row._id);
      let result = await reqDelete({ _id: row._id })
      console.log(result);
      // 将得到的数据更新
      this.taocanItem = result.data
    },


    // 编辑的确定的回调

   async submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let  menuclassify=this.ruleForm.menuclassify
          let  meunname=this.ruleForm.meunname
          let  iswork=this.ruleForm.iswork
          let  price=this.ruleForm.price
          let  office=this.ruleForm.office
          let  project=this.ruleForm.project
          let _id = this.currentid
          let  result = await reqEdit({menuclassify,meunname,iswork,price,office,project,_id})
          if(result.status===200){
            console.log(result)
            this.taocanItem = result.data
            // alert('submit!');
            this.dialogFormVisibleEdit=false
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }

}
</script>

<style >
.package {
  padding: 20px;
}

.package .content {
  /* width: 95%;*/
  height: 400px;
  background: white;
  /* margin: 0 auto;*/
}
.package .block {
  text-align: center;
}
.package .center {
  text-align: center;
}
</style>
